<template>
  <div
    :id="id"
    :style="{
      width: width,
      height: height
    }"
    v-echart-resize
  ></div>
</template>

<script setup>
import { defineProps, onMounted, onUnmounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { unwarp } from '@/utils/commUtils'

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  persent: {
    type: Number,
    default: 50
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  }
})
const chart = ref(null)
watch(
  () => props.persent,
  () => {
    setOptions(props.persent)
  }
)
const setOptions = (value) => {
  const dataArr = [
    {
      value: value,
      name: '亮灯率'
    }
  ]
  const colorSet = [
    [value / 100, 'rgba(229, 169, 53, 1)'],
    [1, 'rgba(223, 86, 11, 1)']
  ]
  const rich = {
    white: {
      fontSize: '0.875rem',
      color: '#E5A935',
      fontFamily: 'Microsoft YaHei',
      fontWeight: 'bold',
      padding: [60, 0, 0, 0]
    },
    radius: {
      fontSize: '0.5rem',
      padding: [100, 0, 0, 0],
      color: '#fff',
      fontFamily: 'Microsoft YaHei',
      fontWeight: 'bold',
      textAlign: 'center'
    },
    size: {
      width: 59,
      backgroundColor: '#1B215B',
      padding: [0, 0, 0, 0]
    },
    size2: {
      width: 59,
      padding: [11, 0, 0, 0],
      backgroundColor: 'rgba(229, 169, 53, 1)'
    }
  }

  const option = {
    backgroundColor: 'rgba(0, 0, 0, 0.01)',
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },

    series: [
      {
        //外圆
        type: 'pie',
        radius: '100%',
        center: ['50%', '50%'],
        startAngle: '225',
        endAngle: '-45',
        z: 0,
        itemStyle: {
          normal: {
            color: new echarts.graphic.RadialGradient(
              0.5,
              0.5,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(17,24,43,0)'
                },
                {
                  offset: 0.5,
                  color: 'rgba(186, 58, 19, .22)'
                },
                {
                  offset: 1,
                  color: '#f00'
                }
              ],
              false
            ),
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: false,
        label: {
          show: false
        },
        tooltip: {
          show: false
        },
        data: [100]
      },
      {
        type: 'gauge',
        name: '外层辅助',
        radius: '100%',
        startAngle: '-45',
        endAngle: '225',
        splitNumber: '100',
        pointer: {
          show: false
        },
        detail: {
          show: false
        },
        data: [
          {
            value: 1
          }
        ],
        title: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: [[1, 'rgba(0, 0, 0, 0.32)']],
            width: 40,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: 1
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        }
      },
      {
        type: 'gauge',
        radius: '82%',
        startAngle: '225',
        endAngle: '-45',
        pointer: {
          show: false
        },
        detail: {
          formatter: function (value) {
            const num = Math.round(value)
            return `{white|${num}}{white|%}\n{radius|亮灯率}\n`
          },
          rich: rich,
          offsetCenter: ['0%', '0%']
        },
        data: dataArr,
        title: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: colorSet,
            width: 25,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: 1
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
          length: 25,
          lineStyle: {
            color: 'rgba(0, 0, 0, 0.01)',
            width: 2,
            type: 'solid'
          }
        },
        axisLabel: {
          show: false
        }
      },
      {
        //内圆
        type: 'pie',
        radius: '56%',
        center: ['50%', '50%'],
        z: 1,
        itemStyle: {
          normal: {
            color: 'rgba(0, 0, 0, 0.01)',
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: false,
        label: {
          show: false
        },
        tooltip: {
          show: false
        },
        data: [100]
      }
    ]
  }
  unwarp(chart.value).setOption(option)
}

const initChart = () => {
  setTimeout(() => {
    if (!chart.value) {
      chart.value = echarts.init(document.getElementById(props.id))
    }
    setOptions(props.persent)
  }, 0)
}

onMounted(() => {
  initChart()
})

onUnmounted(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})
</script>

<style lang="scss" scoped>
</style>
